
<%@include file="/commons/decelerations.jsp" %>
<c:set var="submitButtonName"><c:choose>
	<c:when test='${action eq "CreatePerson"}'>Create Person</c:when>
	<c:otherwise>Maintain Person</c:otherwise>
</c:choose></c:set>

<!-- autocomplete----------------------------------------------------- -->
<link type="text/css" href="../css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="Stylesheet" />
<script type="text/javascript" src='<c:url value="/js/jquery-ui-1.10.3.custom.js"></c:url>'></script>
<!-- autocomplete----------------------------------------------------- -->

<form action="${action}" method="post" id="form">
   <table id ="personInfo">
     <c:choose>
       <c:when test='${action eq "CreatePerson"}'>
       	<tr><td>Person Id</td><td><input type="text" id = "personId" name="personId" value="${person.personId}"/></td></tr>
       </c:when>
       <c:otherwise>
       	<tr><td>Person Id</td><td><input type="text" id = "personId" name="personId" value="${person.personId}" readonly="readonly"/></td></tr>
       </c:otherwise>
     </c:choose>
       <tr><td>FirstName</td><td><input type="text" id = "firstName" name="firstName" value="${person.firstName}"/></td></tr>
       <tr><td>LastName</td><td><input type="text" id = "lastName" name="lastName" value="${person.lastName}"/></td></tr>
       <tr><td>Role</td>
       <td>
       <c:forEach var="role" items="${requestScope.allRole}" varStatus="Role">
       	<label for="${role.roleName}"> ${role.roleName} </label><input type="checkbox" id="${role.roleId} " name="roleId" value="${role.roleId}"/>
       </c:forEach>
       </td>
       </tr>
       <tr>
       <td><p> Also can choose by use textfield</p></td>
       <td><input type="text" id="acRoleSelect"  /></td>
       <td><input type="text" id="acRoleSelect2"  readonly="readonly" /></td>
       </tr>
       <tr>
       	<td><input type="submit" value="${submitButtonName}"/></td>
       	<td><button type="reset">Reset</button></td>
       </tr>
   </table>
</form>
<!-- autocomplete----------------------------------------------------- -->
<script type="text/javascript">
var allRoleId = [ ${allRoleId} ];
//$(document).ready(function() {
	$("#acRoleSelect").autocomplete({
		source: [ ${allRoleId} ]
	});
//});
</script>
<!-- autocomplete END----------------------------------------------------- -->
<!-- autoFoucs----------------------------------------------------------------- -->
<!-- 改變的CSS樣式 -->
<style type="text/css">
	.focus {
		background-color: #ff6;
	}
	.over {
		border: solid #f00;
	}
</style>
<script type="text/javascript">
$(function(){
	// 當滑鼠移到 #block .txt 上時, 讓它能自動取得焦點
	// 並且取得焦點時加上自訂的樣式
	$('#personInfo input').focus(function(){
		// 當 .txt 取得焦點時
		// 加上自訂的 .focus 樣式
		$(this).addClass('focus');
	}).blur(function(){
		// 當 .txt 失去焦點時
		// 移除自訂的 .focus 樣式
		$(this).removeClass('focus');
	}).mouseover(function(){
		// 當滑鼠移到 .txt 上時
		// 讓 .txt 自動取得焦點
		$(this).focus();
	});
	// 當滑鼠移到 #block .txt 上時, 加上自訂的樣式
	$('#personInfo input').hover(function(){
		$(this).addClass('over');
	}, function(){
		$(this).removeClass('over');
	});
	
});
</script>
<!-- autoFoucs----------------------------------------------------------------- -->